<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="">
        <a-form style="margin-top: 30px;" class="wificonf" :gutter="24" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label="头部说明信息">
            <a-textarea
              v-model="wificonf.info"
              placeholder="请输入头部说明信息"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-item>
          <a-form-item label="展示的图标图片">
              <cyyUploadImg
                @uploadSuccess="
                  (e) => {
                    wificonf.pageConf.img = e.data
                  }
                "
                @deleteImg="wificonf.pageConf.img = ''"
                :imgSrc="wificonf.pageConf.img"
                :imgSizeText="'400*500'"
              >
              </cyyUploadImg>
          </a-form-item>
          <a-form-item label="wifi列表页的头图">
              <cyyUploadImg
                @uploadSuccess="
                  (e) => {
                    wificonf.pageConf.photo = e.data
                  }
                "
                @deleteImg="wificonf.pageConf.photo = ''"
                :imgSrc="wificonf.pageConf.photo"
                :imgSizeText="'1000*563'"
              >
              </cyyUploadImg>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="wifi列表">
            <a-button type="primary" @click="addList()">增加一条wifi</a-button>
          
            <div class="table">
              <div class="table-body">
                <a-row class="title self-th">
                  <a-col :span="5" style="text-align: left"> wifi名称(ssid) </a-col>
                  <a-col :span="5" style="text-align: left"> wifi密码 </a-col>
                  <a-col :span="5" style="text-align: left"> 名字下面的描述 </a-col>
                  <a-col :span="5" style="text-align: left"> 右边的tips </a-col>
                </a-row>
                <div class="list" @dragover.prevent>
                  <a-row
                    class="item tr-row"
                    v-for="(item, index) in wificonf.list"
                    :key="index"
                    :draggable="true"
                    v-dragging="{
                      item: item,
                      list: wificonf.list,
                      group: 'row'
                    }"
                  >
                    <a-col :span="5" style="text-align: left">
                      <a-input style="width: 100%" v-model="item.name"></a-input>
                    </a-col>
                    <a-col :span="5" style="text-align: left">
                      <a-input style="width: 100%" v-model="item.password"></a-input>
                    </a-col>
                    <a-col :span="5" style="text-align: left">
                      <a-input style="width: 100%" v-model="item.description"></a-input>
                    </a-col>
                    <a-col :span="5" style="text-align: left">
                      <a-input style="width: 100%" v-model="item.tips"></a-input>
                    </a-col>
                    <a-col :span="4" style="text-align: left">
                      <a-button type="danger" size="small" @click="deleteItem(index)">删除</a-button>
                      <a-icon type="unordered-list" style="cursor: move; margin-left: 5px" />
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </a-form-item>

          <a-form-item label="" :wrapper-col="{ span: 12, offset: 5  }">
            <a-button type="primary" @click="handleSubmit()">保存</a-button>
          </a-form-item>
        </a-form>
      </div>
    </page-tab-list>

  </page-header-wrapper>
</template>

<script>
import { wifiConf, wifiConfSave } from '@/api/marketing/alipayPromotion'
import { cyyUploadImg } from '@/components/CyyUi'

const columns = []
export default {
  components: {
    cyyUploadImg
  },

  data() {
    return {
      queryTime: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      columns,

      queryParam: {
        id: '',
        service_name: '',
        category_id: ''
      },
      list: [],

      item: null,

      categoryList: [],
      idList: [],
      wificonf: {}
    }
  },

  created() {
    this.getList()
  },

  computed: {
  },

  methods: {

    // 获取数据列表
    async getList() {
      const hide = this.$message.loading('加载中', 0)
      let { queryParam, pageSize: page_size } = this

      const res = await wifiConf({
        ...queryParam
      })

      if (res.code == 0) {
        this.wificonf = res.data
      }
      hide()
    },

    handleSubmit() {
      let params = {'conf': this.wificonf}
      wifiConfSave(params).then(res => {
        if (!res.code) {
          this.$message.success(res.msg)
          this.getList()
          return
        }

        this.$message.error(res.msg)
      })
    },
    addList() {
      this.wificonf.list.push({
        id: 1,
        name: '',
        password: '',
        tips: '可直接连接',
        description: '已认证',
      })
    },
    deleteItem(index) {
      console.log(index)
      this.wificonf.list.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.wificonf{
  max-width:1500px;
}




.add {
  display: inline-block;
  position: relative;
  .add-action {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    /* height: 29px; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    border-left: 0;
  }
}
.warning {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 10px;
}
.table {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;

  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  .table-body {
    .ant-row {
      min-height: 54px;
      opacity: 1;
      border-radius: 4px 4px 0px 0px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
    .self-th {
      background: #fafafa;
    }
  }
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
.list {
  .item {
    background-color: #fff;
    padding: 5px;
    display: flex;
    align-items: center;
    .ant-col {
      text-align: center;
      padding: 0 10px;
    }
  }
}
.tr-row:hover {
  background-color: #e6f7ff;
}
</style>
